<!-- Author: Boring -->
<template>
	<y-popup v-if="opened" :options="finalOptions" class="confirm">
		<div class="confirm-wrap">
			<div class="confirm-text">
				{{action.text}}
			</div>
			<div class="bottom-btns">
				<y-button class="btn cancel" @click.native="close">取 消</y-button>
				<y-button class="btn confirm" @click.native="confirm">确 定</y-button>
			</div>
		</div>
	</y-popup>
</template>

<script type="text/javascript">
	import Button from '@/components/button';
	import popupMixin from '@/components/popup/mixin';

	export default {
		name: 'y-confirm',

		mixins: [
			popupMixin
		],

		components: {
			[Button.name]: Button,
		},

		props: {
			action: {
				type: Object,
				confirm: Function,
				required: true
			}
		},

		methods: {
			confirm() {
				this.action.confirm();
				this.close();
			}
		},
	};
</script>

<style type="text/css">
	@import '../../css/var.css';

	.confirm {
		align-items: center;

		&.popup-enter-active,
		&.popup-leave-active {
			visibility: visible;
			transition: 0.3s;

			& .mask,
			& .confirm-wrap {
				transition: inherit;
			}
		}
		&.popup-enter,
		&.popup-leave-active {
			visibility: hidden;
			opacity: 1;

			& .mask {
				opacity: 0;
			}
			& .confirm-wrap {
				transform: translate(0, 100%);
			}
		}
		& .confirm-wrap {
			padding: .2rem .3rem;
			align-self: center;
			/* flex: auto; */
			background-color: #fff;
			width: 80%;
			border-radius: .2rem;
			text-align: center;
			/* height: 3rem; */
		}
		&.bottom-btns{
			border-radius: 0.5em;
			overflow: hidden;
			background: #fff;
			justify-content: space-between;
			display: flex;
		}
		& .btn {
			font-size: 0.32rem;
			color: var(--theme-color);
			padding-top: 0.8em;
			padding-bottom: 0.8em;
			background: white;
			border-radius: 0;

			&:nth-child(n+2) {
				@apply --border-top;
			}
			&:active {
				background: white;
				opacity: 0.8;
			}
		}
		& .cancel {
			color: var(--text-secondary-color);
		}
	}
</style>